<template>
  <view class="timeRange">
    <datetimePicker v-model="startDate" :mode="props.mode" placeholder="请选择开始时间" :maxDate="end_format" v-if="end_format"></datetimePicker>
    <datetimePicker v-model="startDate" :mode="props.mode" placeholder="请选择开始时间" v-else></datetimePicker>
    -
    <datetimePicker v-model="endDate" :mode="props.mode" placeholder="请选择结束时间" :minDate="start_format" v-if="start_format"></datetimePicker>
    <datetimePicker v-model="endDate" :mode="props.mode" placeholder="请选择结束时间" :minDate="start_format" v-else></datetimePicker>
  </view>
</template>

<script setup lang="ts">
// #ifdef MP-WEIXIN
import datetimePicker from "@/components/uv/datetimePicker.vue";
// #endif

const { proxy } = getCurrentInstance();
let props = defineProps(["start", "end", "mode"]);
const emit = defineEmits(["update:start", "update:end"]);
let start_format = ref(null);
let end_format = ref(null);

const startDate = computed({
  get() {
    console.log("开始时间", props.start);
    return props.start ? Number(new Date(props.start)) : null;
  },
  set(value: string) {
    start_format.value = proxy.$utils.getTimeFn(value);
    let time = "";
    switch (props.mode) {
      case "datetime":
        time = proxy.$utils.dateTimeFormateFn(value, "all");
        break;

      default:
        time = proxy.$utils.dateTimeFormateFn(value);
        break;
    }
    emit("update:start", time);
  },
});

const endDate = computed({
  get() {
    return props.end ? Number(new Date(props.end)) : null;
  },
  set(value: string) {
    end_format.value = proxy.$utils.getTimeFn(value);
    let time = "";
    switch (props.mode) {
      case "datetime":
        time = proxy.$utils.dateTimeFormateFn(value, "all");
        break;

      default:
        time = proxy.$utils.dateTimeFormateFn(value);
        break;
    }
    emit("update:end", time);
  },
});
</script>

<style lang="scss" scoped>
.timeRange {
  display: flex;
  align-items: center;
}
</style>
